const {
	innerWidth,
	innerHeight
} = window
const k = innerWidth / innerHeight
// 模型加载实例
const loader = new THREE.STLLoader()

const app = new Vue({
	el: '#app',
	data: {
		// 场景实例
		scene: new THREE.Scene(),
		// 渲染场景实例
		renderer: new THREE.WebGLRenderer({
			antialias: true
		}),
		// 相机实例
		camera: new THREE.PerspectiveCamera(40, k, 0.1, 2000),
		// 辅助线实例
		axisHelper: new THREE.AxisHelper(20),
		// 拖拽控制器实例
		controls: null,
		// 烘干机设备实例
		dryerObject: null
	},
	mounted() {
		this.init()
		this.loaderDryerModal()
		this.initLight()
	},
	methods: {
		// 初始化基础场景配置
		init() {
			const {
				renderer,
				camera,
				scene,
				axisHelper
			} = this
			renderer.setSize(innerWidth, innerHeight)
			// 设置画布颜色和透明度
			renderer.setClearColor(new THREE.Color('#fff'))
			renderer.shadowMap.enabled = true
			renderer.shadowMap.type = THREE.PCFSoftShadowMap
			// 将画布添加到指定容器内
			document.getElementById("app").appendChild(renderer.domElement)
			// 创建相机实例 PerspectiveCamera透视相机  用于3D场景
			camera.position.set(30, 30, 30)
			camera.lookAt(scene.position)
			// 添加辅助线
			// scene.add(axisHelper)
			// 添加拖拽,缩放
			this.initOrbitControls()
		},
		// 创建3D拖拽，缩放事件
		initOrbitControls() {
			const {
				camera,
				scene,
				renderer
			} = this
			this.controls = new THREE.OrbitControls(camera, renderer.domElement)
			// // this.controls.maxDistance = 400
			// // this.controls.minDistance = 100
			this.controls.addEventListener('change', () => {
				renderer.render(scene, camera)
			})
		},
		// 加载烘干机模型
		loaderDryerModal() {
			loader.load('./stl/ALFA-1.STL', geometry => {
				const material = new THREE.MeshLambertMaterial({
					color: '0xffffff'
				})
				const mesh = new THREE.Mesh(geometry, material)
				// material.wireframe = true
				console.log(material)
				mesh.name = "烘干机"
				this.dryerObject = mesh
				mesh.rotation.x = -0.5 * Math.PI //将模型摆正
				mesh.scale.set(0.003, 0.003, 0.003) //缩放
				geometry.center() //居中显示
				this.scene.add(mesh)
				this.renderer.render(this.scene, this.camera)
				document.addEventListener("click", this.onPointerClick)
			})
		},
		// 点击获取指定设备
		onPointerClick(event) {
			if (this.isStartControls) return
			const [w, h] = [innerWidth, innerHeight]
			const raycaster = new THREE.Raycaster()
			const mouse = new THREE.Vector3()
			mouse.x = (event.clientX / w) * 2 - 1
			mouse.y = -(event.clientY / h) * 2 + 1
			raycaster.setFromCamera(mouse, this.camera)
			const intersects = raycaster.intersectObject(this.dryerObject, true)
			if (intersects.length <= 0) return false
			console.log(intersects)
			intersects[0].face.color = 0x000000
		},
		// 为当前场景添加光照ee
		loadLight([x, y, z, o]) {
			const { scene } = this
			const spotLight = new THREE.DirectionalLight(0xffffff, o)
			spotLight.position.set(x, y, z)
			scene.add(spotLight)
		},
		initLight() {
			const arr = [
				[0, 1, 0, 0.6],
				[0, 0, 1, 0.3],
				[-1, 0, 0, 0.2],
				[0, 0, -1, 0.2],
				[0, -1, 0, 0.3],
				[1, 0, 0, 0.2]
			]
			arr.forEach(data => {
				this.loadLight(data)
			})
		}
	}
})
